<template>
  <div>
    <div
      v-for="(item, index) in menuList"
      :key="index"
      class="item"
      :class="{ activeItem: routerPath.match(item.path) }"
      v-show="checkMenuPermission(item.id)"
    >
      <div
        @click="go(item.path)"
        style="padding-left: 22px; height: 50px"
      >
        <div style="display: inline-block">
          <svg-icon
            v-if="routerPath.match(item.path)"
            :icon-class="item.icon"
            style="color: #497fa3"
            font-size="20"
          ></svg-icon>
          <svg-icon
            v-else
            :icon-class="item.icon"
            style="color: #4c565c"
            font-size="20"
          ></svg-icon>
          <!-- <Icon
              v-if="routerPath.match(item.path)"
              :name="item.icon"
              font-size="20"
              color="#497FA3"
            />
            <Icon
              v-else
              :name="item.icon"
              font-size="20"
              color="#4C565C"
            /> -->
        </div>
        <div
          style="display: inline-block; margin-left: 12px"
        >
          {{ item.title }}
        </div>
        <div
          v-if="item.children"
          style="
            display: inline-block;
            float: right;
            margin-right: 20px;
          "
        >
          <i
            class="el-icon-arrow-up"
            v-if="chidrenShow"
          ></i>
          <i class="el-icon-arrow-down" v-else></i>
        </div>
      </div>
      <div
        v-if="
          item.path === 'danganguanli' &&
          item.children &&
          chidrenShow
        "
        style="padding-left: 0"
      >
        <div
          v-for="(items, indexs) in item.children"
          :key="indexs"
          style="padding-left: 50px"
          :class="{
            activeItem: routerPath.match(items.path)
          }"
          @click="goTo(items.path)"
        >
          <div style="display: inline-block">
            <svg-icon
              v-if="routerPath.match(items.path)"
              :icon-class="items.icon"
              style="color: #497fa3"
              font-size="20"
            ></svg-icon>
            <svg-icon
              v-else
              :icon-class="items.icon"
              style="color: #4c565c"
              font-size="20"
            ></svg-icon>
            <!-- <Icon
                v-if="routerPath.match(items.path)"
                :name="items.icon"
                font-size="20"
                color="#497FA3"
              />
              <Icon
                v-else
                :name="items.icon"
                font-size="20"
                color="#4C565C"
              /> -->
          </div>
          <div
            style="display: inline-block; margin-left: 12px"
          >
            {{ items.title }}
          </div>
        </div>
      </div>
      <div
        v-if="
          item.path === 'rizhi' &&
          item.children &&
          chidrenShowTwo
        "
        style="padding-left: 0"
      >
        <div
          v-for="(items, indexs) in item.children"
          :key="indexs"
          style="padding-left: 50px"
          :class="{
            activeItem: routerPath.match(items.path)
          }"
          @click="goTo(items.path)"
        >
          <div style="display: inline-block">
            <svg-icon
              v-if="routerPath.match(items.path)"
              :icon-class="items.icon"
              style="color: #497fa3"
              font-size="20"
            ></svg-icon>
            <svg-icon
              v-else
              :icon-class="items.icon"
              style="color: #4c565c"
              font-size="20"
            ></svg-icon>
            <!-- <Icon
                v-if="routerPath.match(items.path)"
                :name="items.icon"
                font-size="20"
                color="#497FA3"
              />
              <Icon
                v-else
                :name="items.icon"
                font-size="20"
                color="#4C565C"
              /> -->
          </div>
          <div
            style="display: inline-block; margin-left: 12px"
          >
            {{ items.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Icon from '@/components/icon'
import { checkMenuById } from '@/utils/menu/menu'

export default {
  name: 'index',
  props: {
    menuList: Array,
    chidrenShow: Boolean,
    chidrenShowTwo: Boolean
  },
  // components: {
  //   Icon
  // },
  data() {
    return {}
  },
  computed: {
    routerPath() {
      return this.$route.path
    }
  },
  methods: {
    // 路由跳转
    go(path) {
      this.$emit('go', path)
    },
    goTo(path) {
      // 添加from=menu标记，表示这是菜单导航
      this.$router.push({
        path: path,
        query: { from: 'menu' }
      })
    },
    checkMenuPermission(id) {
      return checkMenuById(id)
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  color: #000;
  height: calc(100vh - 60px);
  width: 100%;
  display: flex;

  &_left {
    width: 296px;
    height: 100%;

    .item {
      width: 100%;
      height: auto;
      text-align: left;
      // padding-left: 22px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4c565c;
      line-height: 50px;

      :hover {
        cursor: pointer;
      }
    }

    .activeItem {
      //background: red;
      background: rgba(234, 245, 253, 1);
      border-right: 3px solid #4a80a3;
      color: #497fa3;
      //color: #EAF5FD;
    }
  }

  &_right {
    display: flex;
    width: calc(100% - 200px);
    height: 100%;
    background: #eff3f9;
  }
}
</style>
